<template>
    <div class="catalog_box">
            <table style="width: 680px;margin: 0 auto;">
                <tr>
                    <td>
                        <el-button slot="reference" @click="listGo('新品上市')" >新品上市</el-button>
                    </td>
                    <td v-for="(itmes,index) in shoppList"><el-popover
                            placement="bottom"
                            width="1400"
                            trigger="hover">
                        <el-row style="margin-left: 100px;">
                            <el-col :span="12"><div class="grid-content bg-purple">
                                <div style="float: left;">
                                    <ul class="ul_list">
                                        <li v-for="itme in itmes.shoppListDetail.slice(0,3)">
                                            <el-button type="text" @click="listGoDetail(itme)">{{itme.goods_name}}</el-button>
                                        </li>
                                    </ul>
                                </div>
                                <div style="float: left;margin-left: 50px;">
                                    <ul class="ul_list">
                                        <li v-for="itme in itmes.shoppListDetail.slice(4,7)">
                                            <el-button type="text" @click="listGoDetail(itme)">{{itme.goods_name}}</el-button>
                                        </li>
                                    </ul>
                                </div>
                                <div style="float: left;margin-left: 50px;">
                                    <ul class="ul_list">
                                        <li v-for="itme in itmes.shoppListDetail.slice(8,11)">
                                            <el-button type="text" @click="listGoDetail(itme)">{{itme.goods_name}}</el-button>
                                        </li>
                                    </ul>
                                </div>
                            </div></el-col>
                            <el-col :span="12"><div class="grid-content bg-purple-light">
                                <img :src="imgArray[index]" style="width: 400px;height: 180px;" />
                            </div></el-col>
                        </el-row>
                        <el-button  @click="listGo(itmes.name)" slot="reference">{{itmes.name}}</el-button>
                    </el-popover></td>
                    <td>
                        <el-button slot="reference">礼品中心</el-button>
                    </td>
                    <td>
                        <el-button v-if="checked" slot="reference" @click="back">后台管理</el-button>
                    </td>
                </tr>
            </table>
    </div>
</template>

<script>
// 引用侯馨琳对的接口方法
    import {NewproductGoodsApi,Product4,Product3,Product2,Product5} from '@/api/hxl_port/import'
    export default {
        name: "catalog",
        data(){
            return{
                checked:0,
                shoppList:[
                    {name:'手镯', shoppListDetail:[]},
                    {name:'项链', shoppListDetail:[]},
                    {name:'手表',shoppListDetail:[]},
                    {name:'首饰',shoppListDetail:[]},
                    {name:'戒指',shoppListDetail:[]}],
                admin:['杨燊','刘伟','李举阳','侯馨琳','吕加','周海燕'],
                session:'',
                imgArray:['https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4099927487,3488597427&fm=26&gp=0.jpg',
                    'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2781125304,3349954894&fm=26&gp=0.jpg',
                    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2854668521,2371522158&fm=26&gp=0.jpg',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604570867692&di=7002b606f6af2a2016d732197d0fe271&imgtype=0&src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F03%2F51%2F36%2F895791805bddc82.jpg',
                    'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1052737298,2110335015&fm=26&gp=0.jpg'
                ]
            }
        },
        watch:{
            "$route.query"(){
               this.checkeds();
            }
        },
        methods:{
            checkeds(){
                let value = sessionStorage.getItem('key');
                if (this.admin[0] === value || this.admin[1] === value || this.admin[2] === value|| this.admin[3] === value|| this.admin[4] === value || this.admin[5] === value)
                {
                    this.checked = 1;
                }else {
                    this.checked = 0;
                }
            },
            back(){
                this.$parent.backCheck(false);
                window.removeEventListener('scroll', this.$parent.handleScroll)
                this.$router.push({path:'/backstage/control/hardware'})
            },
          listGo(title){
              let id= 'yangshenhxlliuweizhouhaiyanlijuyanglvjia'+(((1+Math.random())*0x10000)|0).toString(16).substring(1)+'yangshenhxlliuweizhouhaiyanlijuyanglvjia'
            this.$router.push(
                {
                  path:'/newproduct',
                  name:'newproduct',
                  query:{'id':id,'title':title}
                });
          },
           listGoDetail(row){
               this.$router.push({
                   path:'/detail',
                   name:'detail',
                   query: {dialogInfo: JSON.stringify(row)}
               });
           },
           async showList(){
               NewproductGoodsApi(1, 15).then(res => {
                    this.shoppList[0].shoppListDetail = res.data.content;
                });
                Product4(1, 15).then(res => {
                    this.shoppList[3].shoppListDetail = res.data.content;
                });
                Product3(1, 15).then(res => {
                    this.shoppList[2].shoppListDetail = res.data.content;
                });
                Product2(1, 15).then(res => {
                    this.shoppList[1].shoppListDetail = res.data.content;
                });
                Product5(1, 15).then(res => {
                    this.shoppList[4].shoppListDetail = res.data.content;
                })
            }
          },
        created() {
            this.showList();
            this.checkeds();
        }
    }
</script>

<style lang="scss" scoped>
.catalog_box{
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    table{
        tr{
            td{
                .el-button{
                    border: none;
                }
            }
        }
    }
.ul_list{
    line-height: 30px;
}
}
</style>
